<template>
	<view>
		<view class="picture">
			<uv-swiper :list="infor.carouselList" keyName="url" height='250' indicator indicatorMode="line" circular interval="6000"  radius="0"></uv-swiper> 
			<!-- <image src="@/static/picture/img.png" mode="widthFix"></image> -->
		</view> 
		<view class="titlebar">
			<view class="fx-row-sb-end">
				<view class="fx-row-sta">
					<span class="mr16 ft32">{{infor.name}}</span>
					<view class="fx-row-sta mt10">
						<image class="img_tip mr4" src="@/static/picture/time.png" mode="widthFix" lazy-load></image>
						<span class="ft20">{{infor.duration}}分钟</span>
					</view>
				</view>
				<span class="ft24">超{{infor.selectCount}}人选择</span>
			</view>
			<view class="fx-row-sb-end mt38">
				<image style="width: 120rpx;height: 28rpx;" src="@/static/picture/icon0.png" mode="widthFix" lazy-load></image> 
				<view class="fx-row-sta ft24 grey3"  >
					<image class="icon" src="@/static/picture/icon2.png" mode="widthFix" lazy-load></image>
					<span>安全性</span>
				</view> 
				<view class="fx-row-sta ft24 grey2"  >
					<image class="icon" src="@/static/picture/icon3.png" mode="widthFix" lazy-load></image>
					<span>爽约包退</span>
				</view> 
				<view class="fx-row-sta ft24 grey2"  >
					<image class="icon" src="@/static/picture/icon4.png" mode="widthFix" lazy-load></image>
					<span>专业可靠</span>
				</view> 
			</view> 
		</view>
		<view class="info">
			<view class="ft30">适用说明</view>
			<view class="fx-row-s ft26 mt16"  >
				<span class="grey2" style="width: 140rpx;">性别限制</span>
				<view style="width:540rpx ;">{{infor.sex}}</view>
			</view>
			<view class="fx-row-s ft26 mt16"  >
				<span class="grey2" style="width: 140rpx;">使用人群</span>
				<view style="width:540rpx ;">{{infor.targetGroup}}</view>
			</view>
		</view>
		<view class="info">
			<view class="info_box">
				<view class="info_tit ft30">项目详情</view>
				<view class="spot">
					<view class="ft28">项目亮点</view>
					<view class="mt16 ft24 grey3">{{infor.highlights}}</view>
					<view class="fx-row-sb-c mt32 ft28" >
						<view class="fx-row-sta icon_item" v-for="(item,index) in infor.tag" :key="item">
							<image class="mr4" style="width: 24rpx;height: 26rpx;" src="@/static/picture/icon1.png" mode="widthFix" lazy-load></image>
							<span>{{item}}</span>
						</view>
					</view>
				</view>
				<view class="flow fx-row-s mt32">	
					<view class="ft28" style="width: 152rpx;">服务流程</view>
					<view class="flow_list">
						<view class="flow_item" v-for="(item,index) in infor.massageServiceFlowList" :key='item.id'>
							<view class="flow_tit fx-row-sb">
								<span>{{item.content}}</span>
								<span>{{item.duration}}分钟</span>
							</view>
							<view class="flow_img">
								<image  :src="item.img" mode="widthFix" lazy-load></image>
							</view> 
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="info_box">
				<view class="info_tit ft30">禁忌说明</view>
				<view class="mains"> 
					<p class="ft24 mb20 grey3" v-for="(item,index) in infor.tabooDesc" :key="index">{{item}}</p>
				</view> 
			</view>
		</view>
		<view class="info">
			<view class="info_box">
				<view class="info_tit ft30">下单须知</view>
				<view class="mains"> 
					<p class="ft24 mb20 grey3" v-for="(item,index) in infor.instruction" :key="index" style="text-indent: 1em;">{{item}}</p>
				</view> 
			</view>
		</view>
		<view style="width: 100%;height:116rpx"></view>
		<view class="select">
			<view class="select_btn" @click="projectSelect()">选择技师</view>
		</view>
	</view>
</template>

<script>
	import {projectDetails,geturl} from '@/utils/api.js'
	import config from '@/config.js' 
	export default {
		data() {
			return {
				infor:{}, 
				explains:[ ], //适用说明
				spot:[],
				id:''
			};
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id;
			this.getDetails(option.id)
		},
		methods:{ 
			// 获取详情
			getDetails(id){
				const  datas = { 
					"id": id,  //项目id  
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				} 
				projectDetails(datas).then((res) => {
					console.log('成功', res);  
					if(res.code == '200'){ 
						this.infor = res.result  
					}
				}) 
			},
			// 技师  项目分类
			projectSelect(){
				// uni.navigateTo({
				// 	url: '/pages/technician/projectList?state=1&id='+ this.id,  
				// })
				uni.switchTab({
					url:'/pages/technician/index'
				}) 
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
	}
	.picture{
		width: 750rpx;
		height: 500rpx;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
	.titlebar{ 
		padding: 26rpx 30rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		.icon{
			width:26rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}
		.img_tip{
			width: 20rpx;
			height: 20rpx;
		}
	}
	.info{
		width: 690rpx;
		padding: 26rpx 30rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
		.info_box{
			padding-bottom: 20rpx;
			border-radius: 14rpx;
			border: 2rpx solid #F0F0F0;
			overflow: hidden;
			.info_tit{
				padding: 18rpx 20rpx;
				background-color: #F9F9F9;
			}
			.mains{
				width: 646rpx;
				padding: 26rpx;
				margin: 0 auto;
			}
		}
		.spot{
			width: 648rpx;
			padding: 20rpx 0 36rpx 0;
			margin: 0 auto;
			border-bottom: 1rpx solid #eaeaea;
			.icon_item{
				position: relative; 
				// width: 33%;
				// margin-right: 64rpx;
				line-height: 44rpx;
				&::after{
					content: '';
					position: absolute;
					right: -50%;
					width: 4rpx;
					height: 24rpx;
					background: #06CACE;
				} 
			}
			.icon_item:last-child::after{
				content: ''; 
				background: #fff;
			}
		}
		.flow{
			width: 690rpx; 
			padding: 0 30rpx;
			.flow_list{
				width: 446rpx;
				margin-left: 40rpx;
				.flow_item{
					.flow_img{
						position: relative;
						width: 100%;
						margin-top: 10rpx; 
						font-size: 28rpx;
						image{
							width: 100%;
						}
					}
					.flow_img::after{
						content: '';
						position: absolute;
						left: -22rpx;
						top:-4rpx;
						width: 14rpx;
						height: 100%; 
						border-left: 2rpx dashed #06CACE;
					}  
					.flow_tit{
						position: relative;
					}
					.flow_tit::after{
						content: '';
						position: absolute;
						left: -30rpx;
						top:13rpx;
						width: 14rpx;
						height: 14rpx;
						background: #FFFFFF;
						border-radius: 50%;
						border: 2rpx solid #06CACE;
					}
				}
				.flow_item:last-child{
					.flow_img::after{
						content: ''; 
						border-left: 2rpx dashed #fff;
					} 
				}
			}
		} 
	}
	.select{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 88rpx;
		padding: 14rpx 0;
		background-color: #fff;
		box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.04);
		z-index: inherit;
		.select_btn{
			width: 646rpx;
			height: 88rpx;
			margin: 0 auto;
			border-radius: 50rpx; 
			background-color: $uni-main;
			font-size: 36rpx;
			text-align: center; 
			color: #fff;
			line-height: 88rpx;
		}
	}
</style>
